<template>
	<view class="emoji-component-box">
		<scroll-view scroll-y="true" class="emoji-list">
			<view class="emoji-box">
				<view class="emoji-item" v-for="emoji of emojiList" @click="chooseEmoji(emoji)">{{ emoji }}</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name:"emoji",
		data() {
			return {
				emojiList: ["😄", "😃", "😀", "😊", "😉", "😍", "😘", "😚", "😗", "😙", "😜", "😝", "😛", "😳", "😁", "😔", "😌", "😒", "😞", "😣", "😢", "😂", "😭", "😪", "😥", "😰", "😅", "😓", "😩", "😫", "😨", "😱", "😠", "😡", "😤", "😖", "😆", "😋", "😷", "😎", "😴", "😵", "😲", "😟", "😦", "😧", "😈", "👿", "😮", "😬", "😐", "😕", "😯", "😶", "😇", "😏", "😑", "😺", "😸", "😻", "😽", "😼", "🙀", "😿", "😹", "😾", "👹", "👺"]
			};
		},
		methods: {
			chooseEmoji(emoji) {
				this.$emit('chooseEmoji', emoji);
			}
		}
	}
</script>

<style lang="scss">
	.emoji-component-box {
		width: 100vw;
		height: 360rpx;
		
		.emoji-list {
			width: 100%;
			height: 360rpx;
			
			.emoji-box {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				margin-left: 15rpx;
				
				.emoji-item {
					width: 90rpx;
					padding: 10rpx 0;
					font-size: 60rpx;
					text-align: center;
				}
			}
		}
	}
</style>